<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>博客分类</title>
    <base href="<%=request.getContextPath()%>/">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="static/common/css/base.css">
    <link rel="stylesheet" href="static/common/css/article-list.css">
    <link rel="stylesheet" href="static/common/css/author-list.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/jquery/js.cookie.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="icon" href="static/images/favicon.ico">
    <style>
        .main .body .content {
            display: block;
        }

        .main .body .article-list .article-item .info {
            width: 800px;
        }

        .category-list {
            display: flex;
            flex-wrap: wrap;
        }

        .category-list .category-item {
            width: 80px;
            height: 30px;
            background-color: #1e9fff;
            margin: 10px;
            border-radius: 6px;
        }

        .category-list .category-item a {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
            color: #fafafa;
            overflow: hidden; /*超出部分隐藏*/
            white-space: nowrap; /*设置文本不换行*/
            text-overflow: ellipsis; /*设置文本超出的样式为...*/
        }

        .category-list .category-item.category-active {
            background-color: #16b777;
        }

    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="nav">
            <div class="layui-row">
                <div class="layui-col-md2">
                    <div class="logo">
                        <a href="">
                            <img id="logo" src="" alt="">
                        </a>
                    </div>
                </div>
                <div class="layui-col-md8">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <ul class="menu">
                                <li class="menu-item">
                                    <a href="page/index">
                                        <i class="layui-icon layui-icon-find-fill"></i>
                                        首页
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a class="menu-active" href="page/category">
                                        <i class="layui-icon layui-icon-template-1"></i>
                                        分类
                                    </a>
                                </li>
                                <li class="menu-item">
                                    <a href="page/author">
                                        <i class="layui-icon layui-icon-group"></i>
                                        作者
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="layui-col-md6">
                            <div class="search">
                                <div class="search-group">
                                    <input id="search" type="text" placeholder="热门搜索">
                                    <i id="searchBtn" class="layui-icon layui-icon-search"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <div class="user">
                                <div class="avatar">
                                    <a id="dropMenu" href="javascript:;">
                                        <img id="vipAvatar" src="static/upload/avatar/defaultAvatar.jpg"
                                             class="layui-nav-img">
                                        <span id="vipName"></span>
                                    </a>
                                </div>
                                <div class="login">
                                    <div class="login-btn">
                                        <a href="javascript:;" onclick="showLoginWin(0)">登录</a>
                                    </div>
                                    <div class="reg-btn">
                                        <a href="javascript:;" onclick="showLoginWin(1)">注册</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="apply">
                                <div class="apply-btn">
                                    <a href="javascript:;">
                                        <i class="layui-icon layui-icon-edit"></i>
                                        发布文章
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="content">
            <div class="category-list" id="categoryList">

            </div>
            <div class="article-list" id="articleList">

            </div>
            <div id="pageTool" style="margin: 10px auto;text-align: center"></div>
        </div>
    </div>
</div>
</body>
<script src="static/common/js/ajax.js"></script>
<script src="static/common/js/base.js"></script>
<script src="static/common/js/article.js"></script>
<script>
    const pageInfo = {
        page: 1,
        limit: 10
    }
    const laypage = layui.laypage;
    $(function () {
        getCategoryList();
        getArticleList();
    })

    function getCategoryList() {
        http.get('blog/category/list', null, function (res) {
            let $html = '<div class="category-item"><a href="javascript:;">全部</a></div>';
            for (const category of res.data) {
                if (category.status === 1) {
                    $html += '<div data-id="' + category.categoryId + '" class="category-item"><a href="javascript:;">' + category.name + '</a></div>';
                }
            }
            /*渲染分类数据*/
            $("#categoryList").empty().append($html);
            let itemIndex = 0;
            $(".category-item").each((index, item) => {
                if (($(item).data("id") || "") == (sessionStorage.getItem("categoryId") || "")) {
                    itemIndex = index;
                }
            });
            $(".category-item:eq(" + itemIndex + ")").addClass("category-active").siblings(".category-item").removeClass("category-active");
            /*给分类绑定单击事件*/
            $(".category-item").click(function () {
                $(this).addClass("category-active").siblings(".category-item").removeClass("category-active");
                sessionStorage.setItem("categoryId", $(this).data("id") || "")
                pageInfo.page = 1;
                getArticleList();
            });
        })
    }

    function getArticleList() {
        http.get('blog/article/page', {
            ...pageInfo,
            categoryId: sessionStorage.getItem("categoryId") || ""
        }, function (res) {
            createArticleList("articleList", res.data);
            if (res.count > pageInfo.limit) {
                $("#pageTool").show();
                laypage.render({
                    elem: "pageTool",
                    count: res.count,
                    limit: pageInfo.limit,
                    curr: pageInfo.page,
                    jump: function (obj, first) {
                        pageInfo.page = obj.curr
                        pageInfo.limit = obj.limit
                        // 首次不执行
                        if (!first) {
                            getArticleList()
                        }
                    }
                })
            } else {
                $("#pageTool").hide();
            }
        })
    }
</script>
</html>
